<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>行高与盒子模型</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style type="text/css">
    /* 浏览器默认文字大小
    浏览器默认文字大小 16px
    默认行高： 18px（inlne-height）
     行高=文字大小+上间距+下间距 */

      div{
       width: 500px;
       height:300px;
       background-color: blue;
       font-size: 20px;
    line-height: 300px;

      }



   /* 网页中盒子的组成
    ☞border(边框)
    ☞内边距（padding）
    ☞外边距（margin） */
   
  	/* Border（边框）
    ☞Border-width:   边框宽度
    ☞border-style:    边框样式
      ◆solid      边框为实线
     ◆dotted     点线
      ◆dashed     虚线
     ☞border-color:		边框颜色 */

     input{

        border: none;

        outline-style: none;   /* 去掉轮廓线 */
  }

  .usernme{
       border: 1px dashed red;
       background: blue;
  }


  .usernme:focus{
       background-color: yellowgreen;
}

.email{
     border-bottom: 1px dotted  red;
}

.serch{
     border:1px solid black;

     background-image:url("search.png");
     background-repeat:no-repeat;

     background-position: right;
}




    </style>


</head>
<body>
    


    <div>
        小姐姐

    </div>


    <label for="usernme">
            用户名:
         </label>
         <input type="text" class="usernme" id="usernme">
 
          <br>
          <br>
          <label>邮箱：</label><input type="text" class="email" >
          <br>
          <br>
          <label> 搜索: </label><input type="text" class="serch">
 
</body>
</html>